<template>
    <div class="articles">
        <nav-bar :title="title"></nav-bar>
        <Footer></Footer>
        <div class="content">
          <div class="lun">
                <mt-swipe :auto="4000" style="height:3.23rem">
                    <mt-swipe-item class="one">1</mt-swipe-item>
                    <mt-swipe-item class="two">2</mt-swipe-item>
                    <mt-swipe-item class="three">3</mt-swipe-item>
                </mt-swipe>
          </div>
          <div class="read" v-for="(item,index) in list" :key="index">
                <div class="rea">
                    <span class="top"></span> <span>{{item.author}}</span>
                </div>
                <div class="top_a">
                    <span>{{item.title}}</span>
                    <img :src="item.imgSrc" alt="">
                </div>
          </div>
       </div>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import Footer from '@/components/Footer';
import axios from "axios"
export default {
    components: {
      NavBar: NavBar,
      Footer:Footer
    }, 
    data() {
        return {
            title: "文与字",
            list:[]
        };
    },
    created(){
        this.articles()
    },
    methods:{
        articles(){
            var _this = this;
            axios({
                methods: "get",
                url:"https://www.easy-mock.com/mock/5a9654e43d01940a2cdf9980/wechat/news"
            }).then(function(res){
                if(res.status === 200 ){
                    console.log("新闻资讯",res.data);
                    _this.list=res.data
                }
            })
            .catch(function(err){
                console.log(err);
            })
        }
    }
}
</script>

<style scoped lang="scss">
    .articles{
        width:100%;
        height:100vh;
        display:flex;
        flex-direction: column;
        .content{
            width:100%;
            display:flex;
            flex:1;
            overflow: auto;
            flex-direction: column;
            background: #f8f8f8;
            margin-bottom:0.2rem;
            .lun{
                width:100%;
                height:2.55rem;
                border:1px solid blue;
                display:flex;
            }
            .read{
                background:white;
                margin-top:0.15rem;
                .rea{
                    display:flex;
                    align-items: center;
                    padding-top:0.1rem;
                    .top{
                        width:0.31rem;
                        height: 0.31rem;
                        border-radius: 50%;
                        background: red;
                        margin-left: 0.15rem;
                        margin-right: 0.25rem;
                    }
                }
            }
            .top_a{
                display:flex;
                flex-direction: column;
                font-size:0.17rem;
                font-weight: bold;
                span{
                    margin-left: 0.15rem;
                    margin-top: 0.1rem;
                    margin-bottom: 0.1rem;
                }
                img{
                    height: 1.89rem;
                }
            }
        }
    }
</style>

